<template>
  <div class="category-menu">
    <ul class="menu-list">
      <li v-for="(category, index) in categories" 
          :key="index" 
          class="cate-item"
          @click="handleCategoryClick(category)"
          @mouseenter="activeIndex = index"
          @mouseleave="activeIndex = -1">
        <div class="main-category">
          <span>{{ category.name }}</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
        
        <!-- 二级菜单 -->
        <div class="sub-menu" v-show="activeIndex === index">
          <div class="sub-menu-content">
            <div v-for="(group, groupIndex) in category.subCategories" :key="groupIndex" class="sub-category-group">
              <h4 class="group-title">{{ group.title }}</h4>
              <div class="sub-category-list">
                <a v-for="(subCate, subIndex) in group.items" 
                   :key="subIndex" 
                   class="sub-category-item"
                   @click.stop="handleSubCategoryClick(category, subCate)">
                  {{ subCate.name }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeIndex = ref(-1)

// 模拟分类数据，包含二级分类
const categories = ref([
  { 
    name: '家用电器', 
    icon: '', 
    id: 'appliance',
    subCategories: [
      {
        title: '电视',
        items: [
          { name: '全面屏电视', id: 'tv-fullscreen' },
          { name: 'OLED电视', id: 'tv-oled' },
          { name: '智能电视', id: 'tv-smart' },
          { name: '4K超清电视', id: 'tv-4k' },
          { name: '55英寸', id: 'tv-55' },
          { name: '65英寸', id: 'tv-65' }
        ]
      },
      {
        title: '空调',
        items: [
          { name: '壁挂式空调', id: 'air-wall' },
          { name: '柜式空调', id: 'air-cabinet' },
          { name: '中央空调', id: 'air-central' },
          { name: '变频空调', id: 'air-inverter' },
          { name: '1.5匹', id: 'air-1.5' },
          { name: '以旧换新', id: 'air-replace' }
        ]
      },
      {
        title: '洗衣机',
        items: [
          { name: '滚筒洗衣机', id: 'washer-drum' },
          { name: '洗烘一体机', id: 'washer-dry' },
          { name: '波轮洗衣机', id: 'washer-wave' },
          { name: '迷你洗衣机', id: 'washer-mini' },
          { name: '烘干机', id: 'washer-dryer' }
        ]
      }
    ]
  },
  { 
    name: '手机 / 运营商 / 数码', 
    icon: '', 
    id: 'phone',
    subCategories: [
      {
        title: '手机',
        items: [
          { name: '苹果', id: 'phone-apple' },
          { name: '华为', id: 'phone-huawei' },
          { name: '小米', id: 'phone-xiaomi' },
          { name: 'OPPO', id: 'phone-oppo' },
          { name: 'vivo', id: 'phone-vivo' },
          { name: '荣耀', id: 'phone-honor' },
          { name: '一加', id: 'phone-oneplus' },
          { name: '三星', id: 'phone-samsung' }
        ]
      },
      {
        title: '手机配件',
        items: [
          { name: '手机壳', id: 'acc-case' },
          { name: '贴膜', id: 'acc-film' },
          { name: '手机充电器', id: 'acc-charger' },
          { name: '充电宝', id: 'acc-powerbank' },
          { name: '数据线', id: 'acc-cable' },
          { name: '手机耳机', id: 'acc-headphone' }
        ]
      },
      {
        title: '摄影摄像',
        items: [
          { name: '数码相机', id: 'camera-digital' },
          { name: '微单相机', id: 'camera-micro' },
          { name: '单反相机', id: 'camera-dslr' },
          { name: '拍立得', id: 'camera-instant' },
          { name: '运动相机', id: 'camera-action' },
          { name: '摄像机', id: 'camera-video' }
        ]
      }
    ]
  },
  { 
    name: '电脑 / 办公', 
    icon: '', 
    id: 'computer',
    subCategories: [
      {
        title: '电脑整机',
        items: [
          { name: '笔记本', id: 'computer-laptop' },
          { name: '游戏本', id: 'computer-gaming' },
          { name: '平板电脑', id: 'computer-tablet' },
          { name: '台式机', id: 'computer-desktop' },
          { name: '一体机', id: 'computer-all-in-one' },
          { name: '服务器', id: 'computer-server' }
        ]
      },
      {
        title: '电脑配件',
        items: [
          { name: '显示器', id: 'parts-monitor' },
          { name: 'CPU', id: 'parts-cpu' },
          { name: '主板', id: 'parts-motherboard' },
          { name: '显卡', id: 'parts-gpu' },
          { name: '硬盘', id: 'parts-hdd' },
          { name: 'SSD固态硬盘', id: 'parts-ssd' },
          { name: '内存', id: 'parts-ram' }
        ]
      },
      {
        title: '外设产品',
        items: [
          { name: '鼠标', id: 'acc-mouse' },
          { name: '键盘', id: 'acc-keyboard' },
          { name: '键鼠套装', id: 'acc-keyboard-mouse' },
          { name: '电竞外设', id: 'acc-gaming' },
          { name: 'U盘', id: 'acc-usb' },
          { name: '移动硬盘', id: 'acc-hdd' }
        ]
      }
    ]
  },
  // 其他分类保持相同结构，为简洁起见省略部分内容
  { 
    name: '家居 / 家具 / 家装 / 厨具', 
    icon: '', 
    id: 'furniture',
    subCategories: [
      {
        title: '厨具',
        items: [
          { name: '锅具套装', id: 'kitchen-pot' },
          { name: '厨房刀具', id: 'kitchen-knife' },
          { name: '餐具', id: 'kitchen-tableware' }
        ]
      }
    ]
  },
  { 
    name: '男装 / 女装 / 童装 / 内衣', 
    icon: '', 
    id: 'clothing',
    subCategories: []
  },
  { 
    name: '美妆 / 个护清洁 / 宠物', 
    icon: '', 
    id: 'beauty',
    subCategories: [] 
  },
  { 
    name: '女鞋 / 箱包 / 钟表 / 珠宝', 
    icon: '', 
    id: 'accessories',
    subCategories: [] 
  },
  { 
    name: '男鞋 / 运动 / 户外', 
    icon: '', 
    id: 'sports',
    subCategories: [] 
  },
  { 
    name: '母婴 / 玩具乐器', 
    icon: '', 
    id: 'baby',
    subCategories: [] 
  },
  { 
    name: '食品 / 酒类 / 生鲜 / 特产', 
    icon: '', 
    id: 'food',
    subCategories: [] 
  },
  { 
    name: '医药保健 / 计生情趣', 
    icon: '', 
    id: 'health',
    subCategories: [] 
  },
  { 
    name: '图书 / 文娱 / 教育 / 电子书', 
    icon: '', 
    id: 'book',
    subCategories: [] 
  },
  { 
    name: '机票 / 酒店 / 旅游 / 生活', 
    icon: '', 
    id: 'travel',
    subCategories: [] 
  },
  { 
    name: '理财 / 众筹 / 白条 / 保险', 
    icon: '', 
    id: 'finance',
    subCategories: [] 
  },
  { 
    name: '安装 / 维修 / 清洗 / 二手', 
    icon: '', 
    id: 'service',
    subCategories: [] 
  }
])

// 处理主分类点击事件
const handleCategoryClick = (category) => {
  // 跳转到对应的分类页面
  router.push({
    path: '/category',
    query: { 
      id: category.id,
      name: category.name
    }
  })
}

// 处理二级分类点击事件
const handleSubCategoryClick = (mainCategory, subCategory) => {
  // 跳转到对应的二级分类页面
  router.push({
    path: '/category',
    query: { 
      id: subCategory.id,
      main_id: mainCategory.id,
      name: subCategory.name,
      main_name: mainCategory.name
    }
  })
}
</script>

<style lang="scss" scoped>
.category-menu {
  width: 200px;
  height: 470px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: #fff;
  position: relative;
  z-index: 10;
  
  .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .cate-item {
    position: relative;
    cursor: pointer;
    
    .main-category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      height: 29px;
      line-height: 29px;
      font-size: 14px;
      color: #333;
      
      &:hover {
        background-color: #f5f5f5;
        color: var(--primary-color);
      }
    }
    
    .sub-menu {
      position: absolute;
      top: 0;
      left: 200px;
      width: 680px;
      min-height: 470px;
      background-color: #fff;
      box-shadow: 2px 0 5px rgba(0,0,0,0.1);
      z-index: 11;
      
      .sub-menu-content {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 30px;
      }
      
      .sub-category-group {
        width: 30%;
        margin-bottom: 20px;
        
        .group-title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          padding-bottom: 8px;
          margin-bottom: 10px;
          border-bottom: 1px solid #eee;
        }
        
        .sub-category-list {
          display: flex;
          flex-wrap: wrap;
          
          .sub-category-item {
            display: inline-block;
            margin-right: 15px;
            margin-bottom: 8px;
            font-size: 12px;
            color: #666;
            transition: color 0.2s;
            text-decoration: none;
            
            &:hover {
              color: var(--primary-color);
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style> 